<template>
    <div class="tablesj">
        <slot ></slot>
        <el-table  :data="foo" stripe style="width: 100%">
            <el-table-column type="selection"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <!--tabel按钮  -->
                    <slot name="but" :text="scope.row"></slot>
                </template>
            </el-table-column>
            <el-table-column v-for="(item , index) in head" :label="head[index].name" :prop="item.key" />
        </el-table>
    </div>
</template>
<style scoped>
.tablesj {
    background-color: white;
    margin-top: 10px;
    flex: 1;
}
 .el-table{
    height: 100%;
    border:1px solid gainsboro;
    overflow:hidden
}
.tablesj /deep/  th{
    text-align: center;
}
.tablesj /deep/  td{
    text-align: center;
}
.el-table /deep/ .el-button{
    color:blue;
    width:40px;
    border:0;
}
tbody img {
    vertical-align: middle;
    width: 30px;
    height: 30px;
}
.el-table /deep/ .el-table__cell{
    z-index: inherit;
}
</style>

<script setup >
import { onMounted } from 'vue';
const props = defineProps(["foo","head","spsj"])
// function fnn(ee){
//     console.log(ee)
// }
</script>